<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-4 vue使用之实例钩子 </title>
    <script src="../vue.min.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
    {{count}}
    <p>
        <button @click="add">更新数据</button>
    </p>
</div>
<button onclick="app.$destroy()">销毁</button>

<script type="text/javascript">
    var app=new Vue({
        el: '#app',
        data:{
            count: 1
        },
        methods: {
            add:function(){
                this.count++;
            },
            test:function(){
                console.log('methods')
            }
        },
        //初始化数据检测和事件配置
        beforeCreate:function () {
            console.log('1-beforeCreate初始化之后');
            console.log(this.count) //此时打印的是undefined
        },
        //属性可用
        created:function () {
            console.log('2-created 创建完成');
            console.log(this.count) //打印出1
        },
        //挂载vue实例的范围和内容
        beforeMount:function () {
            console.log('3-beforeMount 挂载之前');
        },
        mounted:function () {
            console.log('4-mounted 被创建');
            console.log(this.$el)
        },
        //等待数据更新
        beforeUpdate:function () {
            console.log('5-beforeUpdate 数据更新前')
        },
        //数据更新完成后
        updated:function () {
            console.log('6-updated 被更新后')
        },

        //实例销毁前
        beforeDestroy:function () {
            console.log('7-beforeDestroy 销毁之前');
        },
        //实例销毁后
        destroyed:function () {
            console.log('8-destroyed 销毁之后');
        }
    })
</script>
</body>
</html>